<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bank</title>
    <script src="http://localhost:9019/js/jquery.min.js"></script>


</head>
<body>
<div id="header">

</div>
<div id="function">
    <form action="pandianhistory.do">
        <table border="1">
            <tr><td>货主</td><td><input type="text" name="custID" id="custID" th:value="${session.custID}" onchange="showHuoZhu()"><br>
                <div hidden="hidden" id="HuoZhuDiv" display="none" style="background: aquamarine">
                    <table border="1" id="pro" style="border: #2aabd2">
                        <tr>
                            <td>客户ID</td>
                            <td>客户名称</td>
                            <td>客户手机</td>
                            <td>客户电话</td>
                        </tr>
                    </table>
                </div>
            </td></tr>
            <tr id="date0"><th>盘点日期</th>
                <th><input type="date" name="date" id="date"></th>
                <th>/</th>
                <th><input type="date" name="date2" id="date2" onblur="date()"></th>
            </tr>
            <tr><th></th><th><button type="submit" id="submit" name="submit">查询</button></th></tr>
        </table>
        每页显示条数<select name="pageRows" id="pageRows" onchange="change1(this.value)">
        <option th:each="a:${session.list1}" th:value="${a}" th:text="${a}" th:selected="${session.pageRows==a}"></option>
    </select>&nbsp;&nbsp;&nbsp;
        第<label th:text="${session.pageInfo1.getPageNum()}"></label>页
        <input type="hidden" th:value="${session.pageInfo1.getPageNum()}" id="pageNum"><br>
    </form>
</div>

        <label th:if="${session.pageInfo1.size==0}" style="color: aquamarine">没有查到任何数据!请输入要查询的信息</label>
    <table border="1" id="historyTable" th:if="${session.pageInfo1.size!=0}">
        <tr><td>盘点记录编号</td><td>货主</td><td>盘点日期</td><td>备注</td><td>最后编辑时间</td><td>是否删除</td></tr>
        <tr th:each="each:${session.pageInfo1.getList()}">
            <td th:text="${each.chkrptID}"></td>
            <td th:text="${each.custName}"></td>
            <td th:text="${each.detailsEditTime}"></td>
            <td th:text="${each.custNote}"></td>
            <td th:text="${each.lasttime}"></td>
            <td th:text="${each.detailsIsDel}"></td>
        </tr>
        <tr>
            <button th:value="${session.pageInfo1.getPageNum()>1?session.pageInfo1.getPageNum()-1:session.pageInfo1.getPageNum()}" onclick="nextpage(this.value)">上一页</button>
            <button th:value="${session.pageInfo1.getPageNum()<session.pageInfo1.getPages()?session.pageInfo1.getPageNum()+1:session.pageInfo1.getPageNum()}" onclick="nextpage(this.value)">下一页</button>
        </tr>
    </table>

<div id="copyright">
    版权区
</div>
</body>
<script>
    //使用悬浮窗显示
    function showHuoZhu(){
        document.getElementById("HuoZhuDiv").hidden='';
        document.getElementById("HuoZhuDiv").display='block';
    }

    //使悬浮框消失
    function hiddenHuoZhu(){
        document.getElementById("HuoZhuDiv").hidden='hidden';
        document.getElementById("HuoZhuDiv").display='none';
    }
    //在悬浮窗的表格中插入货主信息
    $(function () {
        $("#custID").keyup(function () {
            $.ajax({
                type: "get",
                url: "selectCustomerBycustID.do",
                data: "custID=" + $("#custID").val(),
                success: function (data) {
                    $("#pro").html("");
                    $("#pro").append("<tr>\n"+
                        "                        <td>客户ID</td>\n" +
                        "                        <td>客户名称</td>\n" +
                        "                        <td>客户手机</td>\n" +
                        "                        <td>客户电话</td>\n" +
                        "           </tr>");
                    for(var i=0;i<data.length;i++){
                        $("#pro").append("<tr id='tr' onmouseout='change(tr)' onmouseover='over(tr)' onclick='check(\""+data[i].custId+"\")'>" +
                            "<td>"+data[i].custId+"</td>" +
                            "<td>"+data[i].custName+"</td>" +
                            "<td>"+data[i].custMobile+"</td>" +
                            "<td>"+data[i].custTel+"</td>" +
                            "</tr>")
                    }
                }
            })
        })
    })

    $(function () {
        $("#date2").blur(function () {
            var zdata = new Date(document.getElementById("date").value.replace("//-/g", "//"));
            var wdata = new Date(document.getElementById("date2").value.replace("//-/g", "//"));
            if(wdata<zdata){
                alert("结算日期不能小于开始日期")
            }else {
                alert("日期格式正确")
            }
        })
    })

    function check(custID) {
        //2 输入框的内容是你点击的div的内容
        $("#custID").val(custID);
        //1 让下方table内容清空
        $("#pro").html("");
        hiddenHuoZhu();
    }
    //改变颜色
    function over(tr) {
        tr.style.backgroundColor="hsl(176,45%,43%)"
    }
    function change(tr) {
        tr.style.backgroundColor="white"
    }

    //判断日期
    // function date() {
    //
    //     var zdata = new Date(document.getElementById("date").value.replace("//-/g", "//"));
    //     var wdata = new Date(document.getElementById("date2").value.replace("//-/g", "//"));
    //     if(wdata<zdata){
    //         alert("结算日期不能小于开始日期")
    //     }else {
    //         alert("日期格式正确")
    //     }
    // }

    function change1(row) {
        var custID=$("#custID").val();
        var date=$("#date").val();
        var date2=$("#date2").val();
        var pageNum=$("#pageNum").val();
        window.location="pandianhistory.do?pageNum="+pageNum+"&pageRows="+row+"&custID="+custID+"&date="+date+"&date2="+date2;
    }
    function nextpage(page) {
        var custID=$("#custID").val();
        var date=$("#date").val();
        var date2=$("#date2").val();
        var pageRows=$("#pageRows").val();
        window.location="pandianhistory.do?pageNum="+page+"&pageRows="+pageRows+"&custID="+custID+"&date="+date+"&date2="+date2;
    }

</script>
</html>